<template>
  <!-- <div>
    <h1>在线用户</h1>
    <ul>
      <li v-for="user in onlineUsers" :key="user.user_id">{{ user.name }}</li>
    </ul>
  </div> -->
  <div class="layout-container">
    <div class="layout-container-form flex space-between">

      <div class="layout-container-form-search">
        <el-input v-model="query.input" :placeholder="$t('message.common.searchTip')" />
        <el-button type="primary" :icon="Search" class="search-btn" @click="getTableData(true)">{{
          $t('message.common.search')
        }}</el-button>
        <el-button type="primary" @click="fetchOnlineUsers()" > 更新 </el-button>
        <el-button type="primary" link> 上次更新时间：{{ lastUpdateTime }} </el-button>
      </div>
    </div>
    <div class="layout-container-table">
      <Table ref="table" v-model:page="page" v-loading="loading" :showIndex="true" :showSelection="true"
        :data="tableData">
        <el-table-column prop="user_id" label="学号/工号" align="center" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="ip" label="IP" align="center" />
        <el-table-column prop="login_time" label="首次登录时间" align="center" />
        <el-table-column prop="last_seen" label="最近活跃时间" align="center" />
        <el-table-column prop="visitorId" label="浏览器指纹" align="center" />
        <el-table-column :label="$t('message.common.handle')" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button type="danger" size="small" @click="handleForceExit(scope.$index, scope.row)">强制退出</el-button>
          </template>
        </el-table-column>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import {  fetchOnlineUsersApi } from '@/api/user';
import { getDeviceInfo } from '@/utils/device'
import Table from '@/components/table/index.vue'
import { Page } from '@/components/table/type'
import { ElMessage } from 'element-plus'
import {  Search } from '@element-plus/icons'
const lastUpdateTime = ref('')
const query = reactive({
  input: ''
})

// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 20,
  total: 0
})
const loading = ref(true)
const tableData = ref([])
const chooseData = ref([])
const handleSelectionChange = (val: []) => {
  chooseData.value = val
}
// 获取表格数据
const fetchOnlineUsers = () => {
  // loading.value = true

  let params = {
    page: page.index,
    pageSize: page.size,
    query: query.input
  }
  fetchOnlineUsersApi(params)
    .then(res => {
      // let data = res.data.onlineUsers
      lastUpdateTime.value = res.data.lastUpdateTime
      tableData.value = res.data.onlineUsers
      page.total = Number(res.data.total)
    })
    .catch(error => {
      tableData.value = []
      page.index = 1
      page.total = 0
    })
    .finally(() => {
      loading.value = false
    })
}




const store = useStore();
const heartbeatInterval = ref(null);
const onlineUsersInterval = ref(null)

onMounted(() => {
  getDeviceInfo().then(deviceInfo => {
    fetchOnlineUsers();
    onlineUsersInterval.value = setInterval(fetchOnlineUsers, 30000); // 每30秒获取一次在线用户列表

  })


})




</script>

<style scoped>
/* 您的样式 */
</style>
